<template>
    <div class="house-sell">
        <PageBanner
            title="发布出售房源"
            :breadcrumbs="[
                { title: '发布房源' }
            ]"
        />
        
        <div class="container">
            <div class="content-wrapper">
                <!-- 提示信息 -->
                <div class="tips-section">
                    <ul class="tips-list">
                        <li class="tip-item">1. 请如实填写房源信息，我们会进行审核</li>
                        <li class="tip-item">2. 上传的图片必须真实有效，且不得含有水印</li>
                        <li class="tip-item">3. 房源发布后会在2个工作日内完成审核</li>
                    </ul>
                </div>

                <!-- 表单部分 -->
                <div class="sell-form">
                    <!-- 基本信息 -->
                    <div class="form-section">
                        <h2 class="section-title">基本信息</h2>
                        
                        <div class="form-row">
                            <label>房源标题</label>
                            <el-input v-model="title" placeholder="请输入房源标题" />
                        </div>
                        
                        <div class="form-row">
                            <label>房源类型</label>
                            <el-select v-model="houseType" placeholder="请选择房源类型" class="full-width">
                                <el-option value="2" label="新房" />
                                <el-option value="1" label="二手房" />
                                <el-option value="3" label="租房" />
                            </el-select>
                        </div>
                        
                        <div class="form-row">
                            <label>物业类型</label>
                            <el-select v-model="propertyType" placeholder="请选择物业类型" class="full-width">
                                <el-option value="1" label="住宅" />
                                <el-option value="2" label="商铺" />
                                <el-option value="3" label="写字楼" />
                            </el-select>
                        </div>
                    </div>

                    <!-- 位置信息 -->
                    <div class="form-section location-section">
                        <h2 class="section-title">位置信息</h2>
                        
                        <div class="location-info">
                            <div class="form-row region-select">
                                <label>省</label>
                                <el-select 
                                    v-model="selectedProvince" 
                                    placeholder="请选择省" 
                                    class="full-width"
                                    size="large"
                                    filterable
                                >
                                    <el-option
                                        v-for="item in provinces"
                                        :key="item.code"
                                        :value="item.code"
                                        :label="item.name"
                                    />
                                </el-select>
                            </div>

                            <div class="form-row region-select">
                                <label>市</label>
                                <el-select
                                    v-model="selectedCity"
                                    :disabled="!selectedProvince"
                                    placeholder="请选择市"
                                    class="full-width"
                                    size="large"
                                    filterable
                                >
                                    <el-option
                                        v-for="item in cities"
                                        :key="item.code"
                                        :value="item.code"
                                        :label="item.name"
                                    />
                                </el-select>
                            </div>

                            <div class="form-row region-select">
                                <label>区</label>
                                <el-select
                                    v-model="selectedDistrict"
                                    :disabled="!selectedCity"
                                    placeholder="请选择区"
                                    class="full-width"
                                    size="large"
                                    filterable
                                >
                                    <el-option
                                        v-for="item in districts"
                                        :key="item.code"
                                        :value="item.code"
                                        :label="item.name"
                                    />
                                </el-select>
                            </div>
                        </div>

                        <div class="address-info">
                        <div class="form-row">
                            <label>小区名称</label>
                                <el-input 
                                    v-model="community" 
                                    placeholder="请输入小区名称" 
                                    size="large"
                                >
                                    <template #prefix>
                                        <el-icon><Location /></el-icon>
                                    </template>
                                </el-input>
                        </div>
                        
                        <div class="form-row">
                            <label>详细地址</label>
                                <div class="address-input-group">
                                    <el-input 
                                        v-model="address" 
                                        placeholder="请输入详细地址（如：xx街道xx号）" 
                                        size="large"
                                    >
                                        <template #prefix>
                                            <el-icon><Position /></el-icon>
                                        </template>
                                        <template #append>
                                            <el-button @click="handleAddressSearch">
                                                <el-icon><Search /></el-icon>
                                                搜索
                                            </el-button>
                                        </template>
                                    </el-input>
                                </div>
                            </div>
                        </div>
                        
                        <div class="map-container">
                            <div class="map-wrapper" id="container">
                                <div v-if="!mapLoaded" class="map-loading">
                                    <el-icon class="is-loading"><Loading /></el-icon>
                                    <span>地图加载中...</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 房源详情 -->
                    <div class="form-section">
                        <h2 class="section-title">房源详情</h2>
                        
                        <div class="form-group">
                            <div class="form-row">
                                <label>房屋户型</label>
                                <el-input v-model="layout" placeholder="几室几厅" />
                            </div>
                            
                            <div class="form-row">
                                <label>建筑面积</label>
                                <el-input v-model="area" placeholder="输入面积">
                                    <template #append>㎡</template>
                                </el-input>
                            </div>
                            
                            <div class="form-row">
                                <label>楼层</label>
                                <el-input v-model="floor" placeholder="输入楼层">
                                    <template #append>楼</template>
                                </el-input>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="form-row">
                                <label>朝向</label>
                                <el-select v-model="direction" placeholder="请选择朝向" class="full-width">
                                    <el-option value="E" label="东" />
                                    <el-option value="S" label="南" />
                                    <el-option value="W" label="西" />
                                    <el-option value="N" label="北" />
                                    <el-option value="SE" label="东南" />
                                    <el-option value="NE" label="东北" />
                                    <el-option value="SW" label="西南" />
                                    <el-option value="NW" label="西北" />
                                </el-select>
                            </div>
                            
                            <div class="form-row">
                                <label>装修情况</label>
                                <el-select v-model="decoration" placeholder="请选择装修情况" class="full-width">
                                    <el-option value="1" label="毛坯" />
                                    <el-option value="2" label="简装修" />
                                    <el-option value="3" label="精装修" />
                                </el-select>
                            </div>
                            
                            <div class="form-row">
                                <label>建筑年代</label>
                                <el-select v-model="buildYear" placeholder="请选择建筑年代" class="full-width">
                                    <el-option value="2000年前" label="2000年前" />
                                    <el-option value="2000-2010年" label="2000-2010年" />
                                    <el-option value="2010-2020年" label="2010-2020年" />
                                    <el-option value="2020年后" label="2020年后" />
                                </el-select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="form-row">
                                <label>售价</label>
                                <el-input v-model="price" @input="calculateUnitPrice" placeholder="请输入售价">
                                    <template #append>万元</template>
                                </el-input>
                            </div>
                            
                            <div class="form-row">
                                <label>单价</label>
                                <el-input v-model="unitPrice" placeholder="根据输入的面积和售价自动计算" disabled>
                                    <template #append>元/㎡</template>
                                </el-input>
                            </div>
                        </div>
                    </div>

                    <!-- 房源图片 -->
                    <div class="form-section">
                        <h2 class="section-title">房源图片</h2>
                        
                        <div class="form-row">
                            <label>封面图</label>
                            <ImageUploader 
                                uploadId="cover-image" 
                                buttonText="选择封面图" 
                                tipText="最大上传限制5MB" 
                                :multiple="false" 
                                ref="coverImageUploader"
                                @change="handleCoverChange"
                            />
                        </div>
                        
                        <div class="form-row">
                            <label>房源照片</label>
                            <ImageUploader 
                                uploadId="house-images" 
                                buttonText="选择房源照片" 
                                tipText="最大上传限制5MB，可选多张" 
                                :multiple="true" 
                                ref="houseImagesUploader"
                                @change="handleImagesChange"
                            />
                        </div>
                    </div>

                    <!-- 房源描述 -->
                    <div class="form-section">
                        <h2 class="section-title">房源描述</h2>
                        
                        <div class="form-row">
                            <label>描述</label>
                            <el-input
                                v-model="description"
                                type="textarea"
                                :rows="5"
                                placeholder="请输入房源描述"
                            />
                        </div>
                    </div>

                    <!-- 联系方式 -->
                    <div class="form-section">
                        <h2 class="section-title">联系方式</h2>
                        
                        <div class="form-group">
                            <div class="form-row">
                                <label>联系人</label>
                                <el-input v-model="contactName" placeholder="请输入联系人姓名" />
                            </div>
                            
                            <div class="form-row">
                                <label>联系电话</label>
                                <el-input v-model="contactPhone" placeholder="请输入联系电话" />
                            </div>
                        </div>
                    </div>

                    <div class="form-tips">
                        您点击"确认发布"后，若您的房源通过初步审核，将会由经纪人与您联系，并对您的房源进行实地核验后与您签订委托协议。平台仅提供信息发布和网络技术服务。
                    </div>

                    <div class="form-actions">
                        <el-button type="primary" @click="submitForm">确认发布</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import PageBanner from '@/views/common/PageBanner.vue'
import { ElInput, ElSelect, ElOption, ElUpload, ElButton, ElMessage, ElLoading } from 'element-plus'
import { Location, Position, MapLocation, Search, Loading } from '@element-plus/icons-vue'
import areaData from 'china-area-data'
import AMapLoader from '@amap/amap-jsapi-loader'
import { addHouse } from '@/api/house'  // 导入封装好的API方法
import { useRouter } from 'vue-router'  // 导入路由
import ImageUploader from '@/components/ImageUploader.vue'

const router = useRouter()  // 初始化路由

// 表单数据
const title = ref('')
const houseType = ref('')
const propertyType = ref('')
const provinces = ref([])
const cities = ref({})
const districts = ref({})
const selectedProvince = ref('')
const selectedCity = ref('')
const selectedDistrict = ref('')
const community = ref('')
const address = ref('')
const layout = ref('')
const area = ref('')
const floor = ref('')
const direction = ref('')
const decoration = ref('')
const buildYear = ref('')
const price = ref('')
const unitPrice = ref('')
const description = ref('')
const contactName = ref('')
const contactPhone = ref('')
const coverImage = ref('')
const images = ref([])
const mapLoaded = ref(false)
const searchAddress = ref('')
const map = ref(null)
const marker = ref(null)
const geocoder = ref(null)
const markers = ref([]) // 存储多个标记点
const placeSearch = ref(null) // 地点搜索服务
const lng = ref(null)
const lat = ref(null)

// 格式化经纬度，确保保留6位小数
const formatCoordinate = (coord) => {
    if (coord === null || coord === undefined) return null;
    return parseFloat(coord).toFixed(6);
}

// 上传组件的引用
const coverImageUploader = ref(null)
const houseImagesUploader = ref(null)

// 添加标记是否正在从地图更新的标志
let isUpdatingFromMap = false

// 监听面积和价格变化，自动计算单价
watch([area, price], () => {
    calculateUnitPrice()
})

// 计算单价
function calculateUnitPrice() {
    const areaValue = parseFloat(area.value)
    const priceValue = parseFloat(price.value)
    
    if (!isNaN(areaValue) && !isNaN(priceValue) && areaValue > 0) {
        unitPrice.value = Math.round(priceValue * 10000 / areaValue).toString()
    } else {
        unitPrice.value = ''
    }
}

// 处理封面图变化
function handleCoverChange(files) {
    if (files && files.length > 0) {
        coverImage.value = files[0]; // 保存文件对象
    } else {
        coverImage.value = null;
    }
}

// 处理房源照片变化
function handleImagesChange(files) {
    if (files) {
        images.value = files; // 保存文件对象数组
    }
}

// 初始化省市区数据
const initAreaData = () => {
    // 省份数据
    provinces.value = Object.entries(areaData['86']).map(([code, name]) => ({
        code,
        name
    }))
}

// 更新城市数据
const updateCities = async () => {
    selectedCity.value = ''
    selectedDistrict.value = ''
    
    if (selectedProvince.value) {
        const cityData = areaData[selectedProvince.value]
        cities.value = Object.entries(cityData).map(([code, name]) => ({
            code,
            name
        }))
    } else {
        cities.value = []
    }
}

// 更新区县数据
const updateDistricts = async () => {
    selectedDistrict.value = ''
    
    if (selectedCity.value) {
        const districtData = areaData[selectedCity.value]
        districts.value = Object.entries(districtData || {}).map(([code, name]) => ({
            code,
            name
        }))
    } else {
        districts.value = []
    }
}

// 清除所有标记点
const clearMarkers = () => {
    if (markers.value.length > 0) {
        markers.value.forEach(marker => {
            map.value.remove(marker)
        })
        markers.value = []
    }
}

// 初始化地图
const initMap = async () => {
    try {
        if (map.value) {
            console.warn('地图已经初始化')
            return
        }

        console.log('开始加载地图...')
        window._AMapSecurityConfig = {
            securityJsCode: 'dd5f8229f90062eef530f238093f0f0e',
        }
        
        const AMap = await AMapLoader.load({
            key: '20043a52000d4a5ba4ac9d73c3f097d0',
            version: '2.0',
            plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.ToolBar', 'AMap.Scale'],
        })
        console.log('AMap加载完成')

        // 等待 DOM 元素准备就绪
        await new Promise(resolve => setTimeout(resolve, 300))

        const container = document.getElementById('container')
        if (!container) {
            throw new Error('地图容器元素未找到')
        }
        console.log('地图容器已找到')

        // 创建地图实例
        map.value = new AMap.Map('container', {
            zoom: 4,
            center: lng.value && lat.value ? [lng.value, lat.value] : undefined,
            resizeEnable: true,
            viewMode: '2D'
        })
        console.log('地图实例已创建')

        // 添加地图控件
        map.value.addControl(new AMap.ToolBar())
        map.value.addControl(new AMap.Scale())

        // 初始化地理编码服务
        geocoder.value = new AMap.Geocoder({
            city: "全国"
        })
        console.log('地理编码服务已初始化')

        // 初始化地点搜索服务
        placeSearch.value = new AMap.PlaceSearch({
            type: '小区',
            pageSize: 10,
            pageIndex: 1
        })
        console.log('地点搜索服务已初始化')

        // 在地图加载完成后的处理
        map.value.on('complete', () => {
            console.log('地图渲染完成事件触发')
            mapLoaded.value = true
            
            // 如果已经选择了省市区，立即更新地图
            if (selectedProvince.value) {
                console.log('初始化完成后发现已选择省份，立即更新地图')
                updateMapForProvince(selectedProvince.value)
            }
        })
        
        // 设置地图点击事件 - 允许用户点击地图选择位置
        map.value.on('click', e => {
            console.log('地图点击位置:', e.lnglat)
            
            // 将经纬度格式化为6位小数
            const clickLng = formatCoordinate(e.lnglat.getLng())
            const clickLat = formatCoordinate(e.lnglat.getLat())
            
            // 清除所有现有标记
            clearMarkers()
            
            // 逆地理编码查询
            geocoder.value.getAddress([clickLng, clickLat], (status, result) => {
                if (status === 'complete' && result.info === 'OK') {
                    const address = result.regeocode.formattedAddress
                    console.log('点击位置地址:', address)
                    
                    // 更新经纬度信息
                    lng.value = clickLng
                    lat.value = clickLat
                    console.log('已更新经纬度 [地图点击]:', lng.value, lat.value)
                    
                    // 创建新标记
                    const clickMarker = new AMap.Marker({
                        position: [clickLng, clickLat],
                        title: address,
                        icon: new AMap.Icon({
                            size: new AMap.Size(25, 34),
                            imageSize: new AMap.Size(25, 34),
                            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
                        }),
                        animation: 'AMAP_ANIMATION_DROP'
                    })
                    
                    // 创建信息窗体
                    const infoWindow = new AMap.InfoWindow({
                        content: `
                            <div style="padding: 8px 0">
                                <h4 style="margin: 0 0 5px">详细地址</h4>
                                <p style="margin: 0; font-size: 12px; color: #666">${address}</p>
                                <p style="margin: 5px 0 0; color: #ff5500; font-size: 12px">经纬度: ${clickLng}, ${clickLat}</p>
                            </div>
                        `,
                        offset: new AMap.Pixel(0, -30)
                    })
                    
                    // 添加到地图
                    map.value.add(clickMarker)
                    markers.value.push(clickMarker)
                    
                    // 绑定点击事件
                    clickMarker.on('click', () => {
                        infoWindow.open(map.value, clickMarker.getPosition())
                    })
                    
                    // 自动打开信息窗体
                    infoWindow.open(map.value, clickMarker.getPosition())
                    
                    // 从地址信息中尝试获取社区/小区名称
                    const addrComponent = result.regeocode.addressComponent
                    const poiList = result.regeocode.pois || []
                    
                    // 提取可能的小区名称并填充表单
                    if (poiList.length > 0 && poiList[0].type.includes('住宅')) {
                        community.value = poiList[0].name
                    } else if (addrComponent.neighborhood) {
                        community.value = addrComponent.neighborhood
                    }
                    
                    // 提取详细地址并填充表单
                    address.value = addrComponent.street + addrComponent.streetNumber
                    
                    ElMessage.success(`已选择位置，经纬度：${clickLng}, ${clickLat}`)
                } else {
                    console.error('获取点击位置信息失败', status, result)
                    ElMessage.warning('获取位置信息失败')
                }
            })
        })
        
        // 添加超时处理
        setTimeout(() => {
            if (!mapLoaded.value) {
                console.warn('地图加载超时，强制设置为已加载')
                mapLoaded.value = true
                
                // 如果已经选择了省市区，立即更新地图
                if (selectedProvince.value) {
                    console.log('超时后发现已选择省份，立即更新地图')
                    updateMapForProvince(selectedProvince.value)
                }
            }
        }, 5000)
    } catch (e) {
        console.error('地图加载失败', e)
        ElMessage.error('地图加载失败，请刷新重试')
        mapLoaded.value = false
    }
}

// 添加专门的函数来更新省份地图
const updateMapForProvince = (provinceCode) => {
    console.log('调用updateMapForProvince:', provinceCode)
    if (!map.value) {
        console.error('地图实例不存在，无法更新省份位置')
        ElMessage.error('地图加载失败，请刷新页面重试')
        return
    }
    
    if (!mapLoaded.value) {
        console.warn('地图未加载完成，等待加载后再更新省份位置')
        // 等待地图加载完成后再更新
        const checkInterval = setInterval(() => {
            if (mapLoaded.value) {
                clearInterval(checkInterval)
                updateMapForProvince(provinceCode)
            }
        }, 100)
        return
    }
    
    if (!geocoder.value) {
        console.error('地理编码服务未初始化，无法更新省份位置')
        try {
            // 尝试重新初始化地理编码服务
            const AMap = window.AMap
            if (AMap) {
                geocoder.value = new AMap.Geocoder({
                    city: "全国"
                })
                console.log('重新初始化地理编码服务')
            } else {
                throw new Error('AMap未加载')
            }
        } catch (e) {
            console.error('重新初始化地理编码服务失败:', e)
            ElMessage.error('地图服务初始化失败，请刷新页面重试')
            return
        }
    }
    
    const provinceName = provinces.value.find(p => p.code === provinceCode)?.name
    if (!provinceName) {
        console.warn('未找到省份名称')
        return
    }
    
    console.log('正在定位到省份：', provinceName)
    
    try {
        geocoder.value.getLocation(provinceName, (status, result) => {
            console.log('省份地理编码结果:', status, result)
            if (status === 'complete' && result.info === 'OK' && result.geocodes.length > 0) {
                const location = result.geocodes[0].location
                console.log('省份位置:', location)
                
                try {
                    // 直接设置中心点，不使用动画
                    map.value.setCenter([location.lng, location.lat])
                    console.log('地图中心点已设置')
                    
                    // 延迟设置缩放级别
                    setTimeout(() => {
                        try {
                            map.value.setZoom(7)
                            console.log('地图缩放级别已设置为7')
                            ElMessage.success(`已定位到${provinceName}`)
                        } catch (e) {
                            console.error('设置缩放级别失败:', e)
                        }
                    }, 200)
                } catch (e) {
                    console.error('设置地图中心点失败:', e)
                    ElMessage.error('地图操作失败，请刷新页面重试')
                }
            } else {
                console.error('定位省份失败:', status, result)
                ElMessage.warning(`定位到${provinceName}失败`)
            }
        })
    } catch (e) {
        console.error('调用地理编码服务失败:', e)
        ElMessage.error('地图服务调用失败，请刷新页面重试')
    }
}

// 添加专门的函数来更新城市地图
const updateMapForCity = (cityCode) => {
    console.log('调用updateMapForCity:', cityCode)
    if (!map.value) {
        console.error('地图实例不存在，无法更新城市位置')
        ElMessage.error('地图加载失败，请刷新页面重试')
        return
    }
    
    if (!mapLoaded.value) {
        console.warn('地图未加载完成，等待加载后再更新城市位置')
        // 等待地图加载完成后再更新
        const checkInterval = setInterval(() => {
            if (mapLoaded.value) {
                clearInterval(checkInterval)
                updateMapForCity(cityCode)
            }
        }, 100)
        return
    }
    
    if (!geocoder.value) {
        console.error('地理编码服务未初始化，无法更新城市位置')
        try {
            // 尝试重新初始化地理编码服务
            const AMap = window.AMap
            if (AMap) {
                geocoder.value = new AMap.Geocoder({
                    city: "全国"
                })
                console.log('重新初始化地理编码服务')
            } else {
                throw new Error('AMap未加载')
            }
        } catch (e) {
            console.error('重新初始化地理编码服务失败:', e)
            ElMessage.error('地图服务初始化失败，请刷新页面重试')
            return
        }
    }
    
    const provinceName = provinces.value.find(p => p.code === selectedProvince.value)?.name
    const cityName = cities.value.find(c => c.code === cityCode)?.name
    if (!provinceName || !cityName) {
        console.warn('未找到省份或城市名称')
        return
    }
    
    console.log('正在定位到城市：', `${provinceName}${cityName}`)
    
    try {
        geocoder.value.getLocation(`${provinceName}${cityName}`, (status, result) => {
            console.log('城市地理编码结果:', status, result)
            if (status === 'complete' && result.info === 'OK' && result.geocodes.length > 0) {
                const location = result.geocodes[0].location
                console.log('城市位置:', location)
                
                try {
                    // 直接设置中心点，不使用动画
                    map.value.setCenter([location.lng, location.lat])
                    console.log('地图中心点已设置')
                    
                    // 延迟设置缩放级别
                    setTimeout(() => {
                        try {
                            map.value.setZoom(11)
                            console.log('地图缩放级别已设置为11')
                            ElMessage.success(`已定位到${cityName}`)
                        } catch (e) {
                            console.error('设置缩放级别失败:', e)
                        }
                    }, 200)
                } catch (e) {
                    console.error('设置地图中心点失败:', e)
                    ElMessage.error('地图操作失败，请刷新页面重试')
                }
            } else {
                console.error('定位城市失败:', status, result)
                ElMessage.warning(`定位到${cityName}失败`)
            }
        })
    } catch (e) {
        console.error('调用地理编码服务失败:', e)
        ElMessage.error('地图服务调用失败，请刷新页面重试')
    }
}

// 添加专门的函数来更新区县地图
const updateMapForDistrict = (districtCode) => {
    console.log('调用updateMapForDistrict:', districtCode)
    if (!map.value) {
        console.error('地图实例不存在，无法更新区县位置')
        ElMessage.error('地图加载失败，请刷新页面重试')
        return
    }
    
    if (!mapLoaded.value) {
        console.warn('地图未加载完成，等待加载后再更新区县位置')
        // 等待地图加载完成后再更新
        const checkInterval = setInterval(() => {
            if (mapLoaded.value) {
                clearInterval(checkInterval)
                updateMapForDistrict(districtCode)
            }
        }, 100)
        return
    }
    
    if (!geocoder.value) {
        console.error('地理编码服务未初始化，无法更新区县位置')
        try {
            // 尝试重新初始化地理编码服务
            const AMap = window.AMap
            if (AMap) {
                geocoder.value = new AMap.Geocoder({
                    city: "全国"
                })
                console.log('重新初始化地理编码服务')
            } else {
                throw new Error('AMap未加载')
            }
        } catch (e) {
            console.error('重新初始化地理编码服务失败:', e)
            ElMessage.error('地图服务初始化失败，请刷新页面重试')
            return
        }
    }
    
    const provinceName = provinces.value.find(p => p.code === selectedProvince.value)?.name
    const cityName = cities.value.find(c => c.code === selectedCity.value)?.name
    const districtName = districts.value.find(d => d.code === districtCode)?.name
    if (!provinceName || !cityName || !districtName) {
        console.warn('未找到省份、城市或区县名称')
        return
    }
    
    console.log('正在定位到区县：', `${provinceName}${cityName}${districtName}`)
    
    try {
        geocoder.value.getLocation(`${provinceName}${cityName}${districtName}`, (status, result) => {
            console.log('区县地理编码结果:', status, result)
            if (status === 'complete' && result.info === 'OK' && result.geocodes.length > 0) {
                const location = result.geocodes[0].location
                console.log('区县位置:', location)
                
                try {
                    // 直接设置中心点，不使用动画
                    map.value.setCenter([location.lng, location.lat])
                    console.log('地图中心点已设置')
                    
                    // 延迟设置缩放级别
                    setTimeout(() => {
                        try {
                            map.value.setZoom(13)
                            console.log('地图缩放级别已设置为13')
                            ElMessage.success(`已定位到${districtName}`)
                            
                            // 如果已经输入了小区名称，自动搜索该区域内的小区
                            if (community.value) {
                                searchCommunity(community.value)
                            }
                        } catch (e) {
                            console.error('设置缩放级别失败:', e)
                        }
                    }, 200)
                } catch (e) {
                    console.error('设置地图中心点失败:', e)
                    ElMessage.error('地图操作失败，请刷新页面重试')
                }
            } else {
                console.error('定位区县失败:', status, result)
                ElMessage.warning(`定位到${districtName}失败`)
            }
        })
    } catch (e) {
        console.error('调用地理编码服务失败:', e)
        ElMessage.error('地图服务调用失败，请刷新页面重试')
    }
}

// 监听省份变化
watch(selectedProvince, async (newValue, oldValue) => {
    console.log('省份变化:', oldValue, '->', newValue)
    if (!newValue) return
    
    await updateCities()
    clearMarkers()
    
    // 使用专门的函数更新地图
    if (mapLoaded.value) {
        updateMapForProvince(newValue)
    } else {
        console.log('地图未加载完成，等待地图加载后自动更新')
    }
})

// 监听城市变化
watch(selectedCity, async (newValue, oldValue) => {
    console.log('城市变化:', oldValue, '->', newValue)
    if (!newValue) return
    
    await updateDistricts()
    clearMarkers()
    
    // 使用专门的函数更新地图
    if (mapLoaded.value) {
        updateMapForCity(newValue)
    } else {
        console.log('地图未加载完成，等待地图加载后自动更新')
    }
})

// 监听区县变化
watch(selectedDistrict, async (newValue, oldValue) => {
    console.log('区县变化:', oldValue, '->', newValue)
    if (!newValue) return
    
    clearMarkers()
    
    // 使用专门的函数更新地图
    if (mapLoaded.value) {
        updateMapForDistrict(newValue)
    } else {
        console.log('地图未加载完成，等待地图加载后自动更新')
    }
})

// 更新地图视图范围
const updateMapView = (points) => {
    if (!map.value || points.length === 0) return
    map.value.setFitView(points, {
        animation: true,
        duration: 500
    })
}

// 创建信息窗体
const createInfoWindow = (poi) => {
    return new AMap.InfoWindow({
        content: `
            <div style="padding: 8px 0">
                <h4 style="margin: 0 0 5px">${poi.name}</h4>
                <p style="margin: 0; font-size: 12px; color: #666">${poi.address}</p>
            </div>
        `,
        offset: new AMap.Pixel(0, -30)
    })
}

// 处理标记点点击
const handleMarkerClick = (marker, poi) => {
    // 关闭其他信息窗体
    markers.value.forEach(m => m.infoWindow && m.infoWindow.close())
    
    // 打开当前信息窗体
    marker.infoWindow.open(map.value, marker.getPosition())
    
    // 更新表单数据
    community.value = poi.name
    
    // 从完整地址中提取详细地址（去除省市区信息）
    const currentProvince = provinces.value.find(p => p.code === selectedProvince.value)?.name || ''
    const currentCity = cities.value.find(c => c.code === selectedCity.value)?.name || ''
    const currentDistrict = districts.value.find(d => d.code === selectedDistrict.value)?.name || ''
    
    let detailAddress = poi.address
    if (currentProvince) detailAddress = detailAddress.replace(currentProvince, '')
    if (currentCity) detailAddress = detailAddress.replace(currentCity, '')
    if (currentDistrict) detailAddress = detailAddress.replace(currentDistrict, '')
    address.value = detailAddress.trim()
    
    // 更新经纬度信息，保留6位小数
    lng.value = formatCoordinate(poi.location.lng)
    lat.value = formatCoordinate(poi.location.lat)
    console.log('已更新经纬度 [小区点击]:', lng.value, lat.value)
    
    // 在地图上标注当前位置的经纬度信息
    try {
        const infoWindow = marker.infoWindow
        const infoContent = infoWindow.getContent() + `<p style="margin:0; color:#ff5500; font-size:12px">经纬度: ${lng.value}, ${lat.value}</p>`
        infoWindow.setContent(infoContent)
    } catch (e) {
        console.error('更新信息窗体内容失败:', e)
    }
    
    // 更新选中的标记点样式
    markers.value.forEach(m => {
        m.setIcon(new AMap.Icon({
            size: new AMap.Size(25, 34),
            imageSize: new AMap.Size(25, 34),
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
        }))
    })
    marker.setIcon(new AMap.Icon({
        size: new AMap.Size(25, 34),
        imageSize: new AMap.Size(25, 34),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
    }))
    
    ElMessage.success(`已选择小区：${poi.name}，经纬度：${lng.value}, ${lat.value}`)
}

// 搜索小区
const searchCommunity = async (keyword) => {
    if (!placeSearch.value || !keyword) return
    
    clearMarkers()
    
    // 设置搜索范围为当前选择的城市
    const city = cities.value.find(c => c.code === selectedCity.value)?.name || '全国'
    placeSearch.value.setCity(city)
    
    // 如果选择了区，设置搜索范围
    if (selectedDistrict.value) {
        const district = districts.value.find(d => d.code === selectedDistrict.value)?.name
        if (district) {
            placeSearch.value.setCityLimit(true)
            placeSearch.value.setCity(district)
        }
    }
    
    ElMessage.info('正在搜索小区...')
    
    try {
        const result = await new Promise((resolve, reject) => {
            placeSearch.value.search(keyword, (status, result) => {
                if (status === 'complete') {
                    resolve(result)
                } else {
                    reject(new Error('搜索失败'))
                }
            })
        })
        
        if (result.poiList.pois.length === 0) {
            ElMessage.warning('未找到相关小区')
            return
        }
        
        ElMessage.success(`找到 ${result.poiList.pois.length} 个相关小区`)
        
        // 创建标记点
        result.poiList.pois.forEach(poi => {
            const marker = new AMap.Marker({
                position: [poi.location.lng, poi.location.lat],
                title: poi.name,
                icon: new AMap.Icon({
                    size: new AMap.Size(25, 34),
                    imageSize: new AMap.Size(25, 34),
                    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
                })
            })
            
            // 创建信息窗体
            marker.infoWindow = createInfoWindow(poi)
            
            // 绑定点击事件
            marker.on('click', () => handleMarkerClick(marker, poi))
            
            map.value.add(marker)
            markers.value.push(marker)
        })
        
        // 调整地图视野
        updateMapView(markers.value)
        
    } catch (error) {
        console.error('搜索小区失败：', error)
        ElMessage.warning('搜索小区失败，请重试')
    }
}

// 监听小区名称变化
watch(community, async (newValue) => {
    if (!mapLoaded.value) return
    if (isUpdatingFromMap) {
        isUpdatingFromMap = false
        return
    }
    
    if (newValue) {
        // 如果输入了小区名称，延迟500ms后自动搜索
        setTimeout(() => {
            if (community.value === newValue) {
                searchCommunity(newValue)
            }
        }, 500)
    } else {
        clearMarkers()
    }
})

// 添加搜索地址的方法
const handleAddressSearch = () => {
    if (!map.value) {
        console.error('地图实例不存在，无法搜索地址')
        ElMessage.warning('地图尚未加载完成，请稍后再试')
        return
    }
    
    if (!mapLoaded.value) {
        ElMessage.warning('地图尚未加载完成，请稍后再试')
        return
    }
    
    if (!geocoder.value) {
        console.error('地理编码服务未初始化，无法搜索地址')
        try {
            // 尝试重新初始化地理编码服务
            const AMap = window.AMap
            if (AMap) {
                geocoder.value = new AMap.Geocoder({
                    city: "全国"
                })
                console.log('重新初始化地理编码服务')
            } else {
                throw new Error('AMap未加载')
            }
        } catch (e) {
            console.error('重新初始化地理编码服务失败:', e)
            ElMessage.error('地图服务初始化失败，请刷新页面重试')
            return
        }
    }
    
    if (!address.value) {
        ElMessage.warning('请输入详细地址')
        return
    }
    
    // 构建完整地址
    const provinceName = provinces.value.find(p => p.code === selectedProvince.value)?.name || ''
    const cityName = cities.value.find(c => c.code === selectedCity.value)?.name || ''
    const districtName = districts.value.find(d => d.code === selectedDistrict.value)?.name || ''
    
    // 组合完整地址进行搜索
    const fullAddress = `${provinceName}${cityName}${districtName}${address.value}`
    console.log('搜索地址:', fullAddress)
    
    // 清除现有标记
    clearMarkers()
    
    // 使用地理编码服务搜索地址
    try {
        geocoder.value.getLocation(fullAddress, (status, result) => {
            console.log('地址搜索结果:', status, result)
            if (status === 'complete' && result.info === 'OK') {
                if (result.geocodes && result.geocodes.length > 0) {
                    const location = result.geocodes[0].location
                    console.log('找到地址位置:', location)
                    
                    // 更新经纬度信息，保留6位小数
                    lng.value = formatCoordinate(location.lng)
                    lat.value = formatCoordinate(location.lat)
                    console.log('已更新经纬度 [地址搜索]:', lng.value, lat.value)
                    
                    try {
                        // 创建标记 - 使用格式化后的经纬度值
                        const AMap = window.AMap
                        const marker = new AMap.Marker({
                            position: [lng.value, lat.value], // 使用格式化后的经纬度创建标记
                            title: fullAddress,
                            icon: new AMap.Icon({
                                size: new AMap.Size(25, 34),
                                imageSize: new AMap.Size(25, 34),
                                image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
                            }),
                            animation: 'AMAP_ANIMATION_DROP'
                        })
                        
                        // 创建信息窗体
                        const infoWindow = new AMap.InfoWindow({
                            content: `
                                <div style="padding: 8px 0">
                                    <h4 style="margin: 0 0 5px">详细地址</h4>
                                    <p style="margin: 0; font-size: 12px; color: #666">${fullAddress}</p>
                                    <p style="margin: 5px 0 0; color: #ff5500; font-size: 12px">经纬度: ${lng.value}, ${lat.value}</p>
                                </div>
                            `,
                            offset: new AMap.Pixel(0, -30)
                        })
                        
                        // 绑定点击事件
                        marker.on('click', () => {
                            infoWindow.open(map.value, marker.getPosition())
                        })
                        
                        // 添加到地图
                        map.value.add(marker)
                        markers.value.push(marker)
                        
                        // 设置地图中心点和缩放级别 - 使用格式化后的经纬度
                        map.value.setCenter([lng.value, lat.value])
                        
                        // 延迟设置缩放级别
                        setTimeout(() => {
                            try {
                                map.value.setZoom(15)
                                console.log('地图缩放级别已设置为15')
                                
                                // 打开信息窗体
                                infoWindow.open(map.value, marker.getPosition())
                                
                                console.log('已根据详细地址更新地图位置')
                                ElMessage.success(`已找到地址位置，经纬度：${lng.value}, ${lat.value}`)
                            } catch (e) {
                                console.error('设置缩放级别失败:', e)
                            }
                        }, 200)
                    } catch (e) {
                        console.error('创建标记或设置地图位置失败:', e)
                        ElMessage.error('地图操作失败，请刷新页面重试')
                    }
                } else {
                    console.warn('未找到匹配的地址位置')
                    ElMessage.warning('未找到匹配的地址位置')
                }
            } else {
                console.error('搜索地址失败:', status, result)
                ElMessage.warning('搜索地址失败，请检查地址是否正确')
            }
        })
    } catch (e) {
        console.error('调用地理编码服务失败:', e)
        ElMessage.error('地图服务调用失败，请刷新页面重试')
    }
}

// 页面加载时初始化数据
onMounted(async () => {
    initAreaData()
    
    // 延迟初始化地图，确保DOM元素已准备就绪
    setTimeout(() => {
        initMap()
    }, 500)
    
    // 初始化默认值
    houseType.value = '2' // 默认新房
    propertyType.value = '1' // 默认住宅
    decoration.value = '2' // 默认简装修
    direction.value = 'S' // 默认朝南
})

onUnmounted(() => {
    if (map.value) {
        map.value.destroy()
    }
})

// 表单验证
function validateForm() {
    // 简单验证必填字段
    if (!title.value) {
        ElMessage.error('请输入房源标题')
        return false
    }
    if (!houseType.value) {
        ElMessage.error('请选择房源类型')
        return false
    }
    if (!propertyType.value) {
        ElMessage.error('请选择物业类型')
        return false
    }
    if (!selectedProvince.value || !selectedCity.value || !selectedDistrict.value) {
        ElMessage.error('请选择房源所在地区')
        return false
    }
    if (!community.value) {
        ElMessage.error('请输入小区名称')
        return false
    }
    if (!price.value) {
        ElMessage.error('请输入房源价格')
        return false
    }
    if (!contactName.value) {
        ElMessage.error('请输入联系人姓名')
        return false
    }
    if (!contactPhone.value) {
        ElMessage.error('请输入联系电话')
        return false
    }
    
    // 检查经纬度是否有效
    if (!lng.value || !lat.value) {
        ElMessage.error('请在地图上选择准确的位置，以便获取经纬度信息')
        return false
    }
    
    return true
}

// 提交表单
async function submitForm() {
    if (!validateForm()) {
        ElMessage.error('请完善必填信息')
        return
    }

    // 检查是否上传了封面图
    const coverFiles = coverImageUploader.value?.getFiles() || [];
    if (coverFiles.length === 0) {
        ElMessage.error('请上传房源封面图')
        return
    }

    // 显示加载状态
    const loading = ElLoading.service({
        lock: true,
        text: '正在提交房源信息...',
        background: 'rgba(0, 0, 0, 0.7)'
    })

    try {
        // 构建FormData对象
        const formData = new FormData()
        
        // 添加表单字段
        formData.append('title', title.value)
        formData.append('houseType', houseType.value)
        formData.append('propertyType', propertyType.value)
        
        // 位置信息
        const provinceName = provinces.value.find(p => p.code === selectedProvince.value)?.name || ''
        const cityName = cities.value.find(c => c.code === selectedCity.value)?.name || ''
        const districtName = districts.value.find(d => d.code === selectedDistrict.value)?.name || ''
        const fullAddress = `${provinceName}${cityName}${districtName}${community.value ? community.value : ''}${address.value ? address.value : ''}`

        formData.append('province', provinceName)
        formData.append('city', cityName)
        formData.append('district', districtName)
        formData.append('community', community.value)
        formData.append('address', fullAddress)
        
        // 添加经纬度信息，确保使用的是用户选择的位置的经纬度，并保留6位小数
        if (lng.value && lat.value) {
            // 确保此时经纬度已经过格式化，是字符串类型，保留6位小数
            console.log('提交经纬度信息 - 经度类型:', typeof lng.value, '值:', lng.value)
            console.log('提交经纬度信息 - 纬度类型:', typeof lat.value, '值:', lat.value)
            
            // 明确使用lng和lat参数名，与后端对应
            formData.append('lng', lng.value)
            formData.append('lat', lat.value)
            
            // 检查后端是否获取到这些参数
            for (let [key, value] of formData.entries()) {
                if (key === 'lng' || key === 'lat') {
                    console.log(`FormData参数 - ${key}: ${value} (${typeof value})`)
                }
            }
        } else {
            ElMessage.error('请在地图上选择位置以获取经纬度信息')
            loading.close()
            return
        }
        
        // 房源详情
        formData.append('layout', layout.value)
        formData.append('area', area.value)
        formData.append('floor', floor.value)
        formData.append('direction', direction.value)
        formData.append('decoration', decoration.value)
        formData.append('buildYear', buildYear.value)
        formData.append('price', parseFloat(price.value) * 10000) // 转换为元为单位
        formData.append('unitPrice', unitPrice.value)
        formData.append('description', description.value)
        formData.append('contactName', contactName.value)
        formData.append('contactPhone', contactPhone.value)
        formData.append('status', '0') // 0表示待审核状态
        
        // 添加封面图
        formData.append('coverImage', coverFiles[0])
        
        // 添加房源照片
        const houseFiles = houseImagesUploader.value?.getFiles() || []
        houseFiles.forEach(file => {
            formData.append('houseImages', file)
        })
        
        // 使用封装好的API方法发送请求
        const response = await addHouse(formData)
        
        // 判断请求是否成功
        if (response.code === 200) {
            // 提示成功
            ElMessage.success(response.msg || '房源信息提交成功，等待审核')
            
            // 重置表单
            resetForm()
            
            // 跳转到用户的房源页面
            router.push('/user/profile')
        } else {
            // 显示后端返回的错误信息
            ElMessage.error(response.msg || '提交失败，请检查填写信息')
            console.error('提交失败，服务器返回:', response)
        }
    } catch (error) {
        // 显示错误信息
        ElMessage.error('提交失败，请稍后重试')
        console.error('提交房源信息失败:', error)
    } finally {
        // 关闭加载
        loading.close()
    }
}

// 重置表单
function resetForm() {
    title.value = ''
    houseType.value = ''
    propertyType.value = ''
    selectedProvince.value = ''
    selectedCity.value = ''
    selectedDistrict.value = ''
    community.value = ''
    address.value = ''
    layout.value = ''
    area.value = ''
    floor.value = ''
    direction.value = ''
    decoration.value = ''
    buildYear.value = ''
    price.value = ''
    unitPrice.value = ''
    description.value = ''
    contactName.value = ''
    contactPhone.value = ''
    
    // 清空图片
    if (coverImageUploader.value) coverImageUploader.value.clearImages()
    if (houseImagesUploader.value) houseImagesUploader.value.clearImages()
}
</script>

<style lang="scss" scoped>
.house-sell {
    background: #f5f7fa;
    
    .container {
        padding: 40px 60px;
        
        .content-wrapper {
            max-width: 1200px;
            margin: 0 auto;
        }
    }

    .tips-section {
        margin-bottom: 24px;
        
        .tips-list {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            list-style: none;
            
            .tip-item {
                margin: 8px 0;
                color: #666;
                font-size: 14px;
            }
        }
    }

    .sell-form {
        background: #fff;
        padding: 32px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);

        .form-section {
            margin-bottom: 40px;
            padding-bottom: 32px;
            border-bottom: 1px solid #eee;

            &:last-child {
                border-bottom: none;
            }

            .section-title {
                font-size: 18px;
                color: #333;
                margin-bottom: 24px;
                font-weight: 500;
                position: relative;
                padding-left: 12px;
                
                &:before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 4px;
                    bottom: 4px;
                    width: 4px;
                    background: #4A60A1;
                    border-radius: 2px;
                }
            }
        }
        
        .form-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            
            .form-row {
                flex: 1;
                min-width: 200px;
            }
        }
        
        .form-row {
            margin-bottom: 20px;
            
            label {
                display: block;
                margin-bottom: 8px;
                font-weight: 500;
                color: #333;
            }
            
            .form-input, .form-select, .form-textarea {
                width: 100%;
                padding: 10px 12px;
                border: 1px solid #dcdfe6;
                border-radius: 4px;
                font-size: 14px;
                color: #333;
                background-color: #fff;
                transition: border-color 0.2s;
                box-sizing: border-box;
                
                &:focus {
                    outline: none;
                    border-color: #409eff;
                }
                
                &::placeholder {
                    color: #909399;
                }
                
                &:disabled {
                    background-color: #f5f7fa;
                    color: #909399;
                    cursor: not-allowed;
                }
            }
            
            .form-select {
                appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 8px center;
                background-size: 16px;
                padding-right: 30px;
            }
            
            .form-textarea {
                resize: vertical;
                min-height: 100px;
            }
            
            .input-with-unit {
                display: flex;
                align-items: center;
                
                .unit {
                    margin-left: 8px;
                    color: #666;
                }
                
                .form-input {
                    flex: 1;
                }
            }
            
            .file-upload {
                .file-input {
                    display: none;
                }
                
                .upload-button {
                    display: inline-block;
                    padding: 10px 16px;
                    background-color: #f5f7fa;
                    border: 1px dashed #d9d9d9;
                    border-radius: 4px;
                    cursor: pointer;
                    color: #606266;
                    text-align: center;
                    transition: 0.3s;
                    
                    &:hover {
                        border-color: #409eff;
                        color: #409eff;
                    }
                }
                
                .upload-tip {
                    font-size: 12px;
                    color: #999;
                    margin-top: 8px;
                }
            }
        }

        .location-section {
            .location-info {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                margin-bottom: 24px;
            }

            .address-info {
                margin-bottom: 24px;

                .form-row {
                    margin-bottom: 16px;

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                
                .address-input-group {
                    display: flex;
                    width: 100%;
                    
                    .el-input {
                        flex: 1;
                    }
                }
            }

            .region-select {
                margin: 0;
        }

        .map-container {
                position: relative;
                
                .map-wrapper {
                    height: 400px;
                    background: #f8f9fa;
            border-radius: 8px;
                    overflow: hidden;
                    
                    .map-loading {
                        height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
                        gap: 8px;
                        color: #909399;
                        font-size: 14px;
                        
                        .el-icon {
                            font-size: 20px;
                        }
                    }
                }
            }
        }

        .form-tips {
            padding: 16px;
            background: #f5f7fa;
            border-radius: 4px;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin: 24px 0;
        }

        .form-actions {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 40px;
            
            .btn {
                min-width: 120px;
                padding: 12px 20px;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                background-color: #fff;
                font-size: 14px;
                cursor: pointer;
                transition: 0.3s;
                
                &:hover {
                    background-color: #f5f7fa;
                }
                
                &.btn-primary {
                    background-color: #409eff;
                    border-color: #409eff;
                    color: #fff;
                    
                    &:hover {
                        background-color: #66b1ff;
                        border-color: #66b1ff;
                    }
                }
            }
        }
    }
}

.location-section {
.location-info {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 24px;
    }

    .address-info {
        margin-bottom: 24px;

        .form-row {
            margin-bottom: 16px;

            &:last-child {
                margin-bottom: 0;
            }
        }
        
        .address-input-group {
            display: flex;
    width: 100%;
            
            .el-input {
                flex: 1;
            }
        }
    }

    .region-select {
        margin: 0;
    }

    .map-container {
        position: relative;
        
        .map-wrapper {
            height: 400px;
            background: #f8f9fa;
            border-radius: 8px;
            overflow: hidden;
            
            .map-loading {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                color: #909399;
                font-size: 14px;
                
                .el-icon {
                    font-size: 20px;
                }
            }
        }
    }
}

:deep(.el-input) {
    --el-input-height: 40px;
    
    .el-input__wrapper {
        box-shadow: 0 0 0 1px #dcdfe6;
        
        &:hover {
            box-shadow: 0 0 0 1px var(--el-color-primary);
        }
        
        &.is-focus {
            box-shadow: 0 0 0 1px var(--el-color-primary);
        }
    }
    
    .el-input__prefix {
        color: #909399;
    }
}

:deep(.el-select) {
    .el-input {
        --el-input-height: 40px;
    }
}
</style> 